import { Modal } from 'antd';
import { observer } from 'mobx-react';
import {  LockOutlined } from '@ant-design/icons';
import { Form, Input, Button } from 'antd';
import { settingStore } from '../../stores/SettingStore';

interface LoginModalProps {
    visible: boolean;
    cancle: Function;
}

export const ChangePassword = observer((props: LoginModalProps) => {
    return (
        <Modal title='修改密码' visible={props.visible}
            width={400}
            footer={null}
            centered={true}
            onCancel={() => { props.cancle() }}
        >
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: false }}
                onFinish={(v) => settingStore.changePssowrd(v)}
            >

                <Form.Item
                    name="oldpassword"
                    rules={[{ required: true, message: '请输入原密码' }]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请输入原密码"
                    />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入新密码' }]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请输入新密码"
                    />
                </Form.Item>

                <Form.Item
                    name="confirmpassword"
                    rules={[{ required: true, message: '请确认新密码' },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('新密码两次输入不一致!'));
                        },
                    }),
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请确认新密码"
                    />
                </Form.Item>


                <Form.Item>
                    <Button htmlType="submit" className="login-form-button">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
})













